第十三天：箭頭函數與匿名函數

箭頭函數（Arrow Functions） 和 **匿名函數（Anonymous Functions）**兩種函數表達方式在 JavaScript 中非常實用，讓我們以更簡潔的方式定義和使用函數。

1. 匿名函數（Anonymous Functions）

匿名函數，顧名思義，是指沒有名稱的函數。這種函數通常在需要一次性使用函數的情況下使用，特別是作為參數傳遞給其他函數時。

語法：
function(參數1, 參數2, ...) {
// 函數的代碼
}

匿名函數無法在外部直接調用，但可以在函數表達式或回調函數中使用。

範例：
setTimeout(function() {
console.log("這是一個匿名函數！");
}, 1000);

在這裡，匿名函數作為 setTimeout 的回調函數，在一秒後被執行。

2. 箭頭函數（Arrow Functions）

箭頭函數 是 ES6 引入的更簡潔的函數語法，特別適合書寫簡單的回調函數。與傳統函數不同的是，箭頭函數不會綁定自己的 this 值，這在某些情況下特別有用。

語法：
(參數1, 參數2, ...) => {
// 函數的代碼
}

如果只有一個參數，括號是可選的；如果函數體只有一個表達式，花括號和 return 關鍵字可以省略，該表達式的值會自動返回。

範例：
// 傳統函數寫法
let add = function(a, b) {
return a + b;
};

// 箭頭函數寫法
let add = (a, b) => a + b;

console.log(add(2, 3)); // 輸出 5

3. 箭頭函數與 this

箭頭函數的一個重要特性是不綁定 this。它會繼承來自外部作用域的 this值，這使得它在某些情況下比傳統函數更易用。

範例：
function Person(name) {
this.name = name;

setTimeout(() => {
console.log(你好，我是 ${this.name});
}, 1000);
}

let person = new Person("Alice"); // 一秒後輸出 "你好，我是 Alice"

在這個例子中，箭頭函數繼承了 Person 函數內的 this，使得我們能夠正確地訪問到 name 屬性。

4. 匿名函數與箭頭函數的對比

• 語法：箭頭函數比匿名函數語法更加簡潔。
• this 行為：箭頭函數不綁定 this，而匿名函數會使用其自身的 this。
• 返回值：箭頭函數可以省略 return 關鍵字和花括號，在簡單的表達式中自動返回值。

範例：
let numbers = [1, 2, 3, 4];

// 使用匿名函數
let squaresAnonymous = numbers.map(function(num) {
return num * num;
});
console.log(squaresAnonymous); // [1, 4, 9, 16]

// 使用箭頭函數
let squaresArrow = numbers.map(num => num * num);
console.log(squaresArrow); // [1, 4, 9, 16]

5. 高階函數中的應用

匿名函數和箭頭函數常用於 高階函數 中（例如 map、filter、reduce 等），它們使代碼更加簡潔和可讀。

範例：
let numbers = [1, 2, 3, 4, 5];

// 使用匿名函數
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

// 使用箭頭函數
let evenNumbersArrow = numbers.filter(num => num % 2 === 0);
console.log(evenNumbersArrow); // [2, 4]

6. 立即執行函數表達式（IIFE）

匿名函數還可以用於 立即執行函數表達式（IIFE, Immediately Invoked Function Expression），這是一種定義後馬上執行的函數。

範例：
(function() {
console.log("這是一個立即執行的匿名函數！");
})();

這種模式常用於創建私有作用域，避免全局變量污染。